<template>
	<div class="Body">
		<el-card style="width: 97%;" shadow="always">
			<div class="top-card">
				<h1>{{MoresInfo.moresName}}</h1>
				<!-- <div class="addres">地址：
					{{MoresInfo.district}}
					{{MoresInfo.detailedAddress}}
				</div> -->
				<div class="content_click">更新时间：{{MoresInfo.updateTime}}</div>
				<div class="w-e-text">
					<div v-html="MoresInfo.moresIntroduce"></div>
				</div>
			</div>
		</el-card>

	</div>

</template>

<script>
	import MoresApi from "@/api/mores.js"
	export default {
		data() {
			return {
				MoresInfo: {},
			}
		},
		methods: {
			async getMoresInfo() {
				const res = await MoresApi.getMoresInfo('/znMores/getMoresInfo/' + this.getId());
				if (res.code === 200) {
					this.MoresInfo = res.data;
				}
			},
			getId() {
				return this.$route.params.moresId;
			},
		},
		mounted() {
			const moresId = this.getId();
			console.log("获取到的ID为：", moresId);
		},
		created() {
			this.getMoresInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.Body {
		margin: 10px 15% 0 15%;

		.top-card {
			h1 {
				width: 100%;
				height: 45px;
				line-height: 45px;
				font-size: 24px;
				text-align: center;
				color: #1890ff;
				margin: 10px auto;
			}

			.content_click {
				width: 100%;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				text-align: center;
				color: #999;
				margin: 10px auto;
				border-bottom: 1px dashed #ddd;
			}

			.addres {
				width: 100%;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				text-align: center;
				color: #999;
				margin: 10px auto;
			}

			img {
				max-width: 50%;
				overflow: hidden;
				display: block;
				margin: 10px auto !important;
				text-align: center !important;
			}

			p {
				color: rgb(51, 51, 51);
				font-family: PingFangSC-Regular;
				font-size: 14px;
				text-wrap: wrap;
				background-color: rgb(255, 255, 255);
			}
		}
	}
</style>